<template>
  <div class="flist">
    <div class="child">
      <h3>
        <img src="../assets/icon/mine/gray.png" alt>魅力彩妆
        <img src="../assets/icon/mine/gray.png" alt>
      </h3>
      <div class="lists">
        <ul>
          <!-- <router-link :to="{ name: 'ListInfo', params: { type:type }}" > -->
            <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe62c;</i>
              <p>化妆</p>
            </li>
          </router-link>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe62c;</i>
              <p>粉底</p>
            </li>
          </router-link>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe650;</i>
              <p>腮红</p>
            </li>
          </router-link>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe626;</i>
              <p>眼彩</p>
            </li>
          </router-link>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe504;</i>
              <p>眉笔</p>
            </li>
          </router-link>
        </ul>
      </div>
    </div>
    <div class="child">
      <h3>
        <img src="../assets/icon/mine/gray.png" alt>面部护理
        <img src="../assets/icon/mine/gray.png" alt>
      </h3>
      <div class="lists">
        <ul>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe689;</i>
              <p>卸妆</p>
            </li>
          </router-link>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe689;</i>
              <p>洁面</p>
            </li>
          </router-link>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe669;</i>
              <p>T部护理</p>
            </li>
          </router-link>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe669;</i>
              <p>面部护理</p>
            </li>
          </router-link>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe666;</i>
              <p>颈部护理</p>
            </li>
          </router-link>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe666;</i>
              <p>眼部护理</p>
            </li>
          </router-link>
        </ul>
      </div>
    </div>
    <div class="child">
      <h3>
        <img src="../assets/icon/mine/gray.png" alt>香水
        <img src="../assets/icon/mine/gray.png" alt>
      </h3>
      <div class="lists">
        <ul>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe647;</i>
              <p>女士香水</p>
            </li>
          </router-link>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe647;</i>
              <p>男士香水</p>
            </li>
          </router-link>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe647;</i>
              <p>迷你香水</p>
            </li>
          </router-link>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe647;</i>
              <p>香水走珠</p>
            </li>
          </router-link>
          <router-link to="/listinfo">
            <li>
              <i class="icon iconfont">&#xe647;</i>
              <p>香氛</p>
            </li>
          </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Flist",
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
.flist {
  margin-top: 80px;
  padding-bottom: 80px;
}
.child {
  width: 100%;
}
h3 {
  width: 100%;
  text-align: center;
  font-size: 18px;
  height: 60px;
  line-height: 60px;
  font-weight: 400;
  box-sizing: border-box;
}
img {
  width: 10px;
  padding: 0 5px;
}
.lists {
  margin-left: 10px;
  width: 355px;
  padding: 10px 20.5px;
  border: 2px solid #e7e7e7;
  box-shadow:0px 0px  10px 5px #e7e7e7;
  border-radius: 8px;
  box-sizing: border-box;
}
li {
  float: left;
  width: 77.5px;
  text-align: center;
  height: 80px;
  vertical-align: middle;
}
i {
  font-size: 50px;
  counter-reset: #808080;
}
p {
  font-size: 14px;
  color: #808080;
}
</style>


